<template>
  <div class="img-list">
    <div class="upload-img">
      <a-icon type="plus" :style="{ 
              fontSize: '33px', 
              color: '#265cff', 
              position: 'absolute' 
              ,top: '50%',
              left: '50%',
              transform: 'translate(-50%,-50%)' }"
      />
    </div>
    <mu-card class="img-card" v-for="item,index in 8" :key="index">
      <img class="upload-cover" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=205026630,4063799543&fm=26&gp=0.jpg">
      <mu-icon class="upload-cover-cancel" value="cancel" color="#666666" size="24"></mu-icon>
      <a-progress class="upload-progress" :percent="80" strokeColor="rgba(51, 51, 51, 0.8)"/>
    </mu-card>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  }
}
</script>

<style lang="less">
.img-list {
  display: flex;
  flex-wrap: wrap;

  .upload-img {
    width: 156px;
    height: 156px;
    position: relative;
    background: #F2F2F2;
  }
  .img-card {
    width: 156px;
    height: 156px;
    position: relative;
    box-shadow: none;
    overflow: hidden;
    margin-left: 6px;
    margin-bottom: 6px;
    &:nth-child(6) {
      margin-left: 0px;
    }

    .upload-cover {
      width: 100%;
    }
    .upload-cover-cancel {
      position: absolute;
      right: 9px;
      top: 9px;
      z-index: 1;
      cursor: pointer;
      -webkit-transform: scale(0);
      transform: scale(0);
      transform-origin: 100% 0;
      transition: all 0.1s linear;
    }
    .upload-progress {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      transform: rotate( -90deg );
      .ant-progress-outer {
        margin: 0;
        padding: 0;
      }
      .ant-progress-inner {
        background: none;
        border-radius: 0;
        .ant-progress-bg {
          height: 156px !important;
          border-radius: 0 !important;
        }
      }
      .ant-progress-text {
        color: #ffffff;
        font-size: 21px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate( 90deg );
        .anticon-check-circle {
          display: none;
        }
      }
    }
    &:hover {
      .upload-cover-cancel {
        -webkit-transform: scale(.6);
        transform: scale(.6);
      }
    }
  }
}
</style>